<template>
	<view class="container">
		<!-- 订单列表 -->
		<div class="title-box">
			<div class="title-text">
				<text>{{ listData.subUserName || '' }}</text>
				(
				<text>{{ listData.subUserPhone || '' }}</text>
				)的订单收益记录
			</div>
			<div class="title-date">
				<view class="uni-list-cell-db">
					<picker mode="date" :value="date" fields="month" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">
							{{ date }}
							<uni-icons type="right" size="12" style="color: #b0b0b0"></uni-icons>
						</view>
					</picker>
				</view>
			</div>
		</div>
		<view class="order-list">
			<!-- 单个订单 -->
			<scroll-view scroll-y class="list-container" :scroll-top="scrollTop" @scrolltolower="loadMore">
				<view class="order-item" v-for="(order, index) in orders" :key="index">
					<view class="order-header">
						<text class="title">
							<text>{{ order.productName || '' }}</text>
							<span class="title-number">*{{ order.quantity  || 0}}</span>
						</text>
						<text class="amount">
							￥
							<text>{{ order.commissionPrice  || 0 }}</text>
						</text>
					</view>
					<view class="order-detail">
						<text class="label">荷友：</text>
						<text class="value">{{ order.subUserName || '' }}</text>
					</view>
					<view class="order-detail">
						<text class="label">下单时间：</text>
						<text class="value">{{ order.timeStr  || ''}}</text>
					</view>
					<view class="order-detail">
						<text class="label">实付金额：</text>
						<text class="value">
							￥
							<text>{{ order.totalPayment  || 0}}</text>
						</text>
						<text class="label" style="margin-left: 80rpx">收益比例：</text>
						<text class="value">{{ order.commissionProportion  || 0 }}</text>
					</view>
					<view class="order-detail">
						<text class="label">结算状态：</text>
						<text class="value">{{ statusCode[order.status] || '' }}</text>
					</view>
				</view>
				<view class="loading-status">
					<template v-if="loading">
						<uni-load-more status="loading"></uni-load-more>
					</template>
					<template v-else-if="noMoreData">
						<text class="no-more">没有更多数据了</text>
					</template>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			date: currentDate,
			page: 1, // 当前页码
			pageSize: 5, // 每页条数
			loading: false, // 加载状态
			noMoreData: false, // 是否无更多数据
			scrollTop: 0, // 滚动位置,
			total: 0,
			listData: {},
			// 订单数据
			orders: [],
			subUserId: null,
			statusCode: {
				0: '待结算',
				1: '可结算',
				2: '已结算',
				3: '不结算(退款)'
			}
		};
	},
	onLoad(option) {
		// option.subUserId
		this.subUserId = option.subUserId;
		this.initData();
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	methods: {
		// 初始化数据
		async initData() {
			try {
				this.loading = true;
				this.fetchData();
			} finally {
				this.loading = false;
			}
		},

		// 加载更多
		async loadMore() {
			if (this.loading || this.noMoreData) return;

			try {
				this.loading = true;
				this.page = this.page + 1
				this.fetchData();
			} catch (e) {
			} finally {
				this.loading = false;
			}
		},

		// 请求数据（需替换为真实API）
		async fetchData() {
			const selectYear = this.date?.split('-')?.[0];
			const selectMonth = this.date?.split('-')?.[1];
			const data = {
				page: this.page,
				pageSize: 5,
				selectMonth: selectMonth,
				status: this.currentIndex,
				selectYear: selectYear,
				subUserId: this.subUserId
			};

			this.$post('/yahe/promotion/detail/record', data, '1').then((res) => {
				if (res.success) {
					this.orders = this.orders.concat(res.content?.incomePage?.records || []) || [];
					this.page = res.content?.incomePage?.current;
					this.total = res.content?.incomePage?.total;
					this.listData = {
						subUserName: res.content?.subUserName,
						subUserPhone: res.content?.subUserPhone
					};
					this.checkNoMoreData(res);
				} else {
					this.$toast(res.message, 'none');
				}
			});
		},

		// 判断是否无更多数据
		checkNoMoreData(res) {
			const totalPages = Math.ceil(res.content?.incomePage?.total / this.pageSize);
			this.noMoreData = this.page >= totalPages;
		},
		bindDateChange: function (e) {
			this.date = e.detail.value;
			this.page = 1;
			this.orders = [];
			uni.showLoading({
				title: '加载中'
			});
			this.fetchData();
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			// let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			// day = day > 9 ? day : '0' + day;
			// return `${year}-${month}-${day}`;
			return `${year}-${month}`;
		}
	}
};
</script>

<style>
/* 全局样式 */
.container {
	background-color: white;
	height: 100%;
	box-sizing: border-box;
}

/* 订单列表样式 */
.order-list {
	display: flex;
	flex-direction: column;
	height: 90%;
}

/* 单个订单样式 */
.order-item {
	background-color: #fff;
	padding: 16rpx 30rpx;
	border-bottom: 1px solid #efefef;
}

.order-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 16rpx 0px;
}

.order-header .title {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 500;
	font-size: 28rpx;
	color: #3a3a3a;
}

.order-header .amount {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #ff6737;
}

.order-detail {
	display: flex;
	margin-bottom: 16rpx;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #6d6d6d;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.order-detail .label {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #6d6d6d;
}

.order-detail .value {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #6d6d6d;
}

.title-box {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: baseline;
	padding: 0rpx 20rpx;
	background-color: #f4f4f4;
}

.title-text {
	display: inline-block;
	padding: 28rpx 0rpx;
	margin-left: 14rpx;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 26rpx;
	color: #6d6d6d;
}

.title-text span {
	margin: 0rpx 4rpx;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 600;
	font-size: 30rpx;
	color: #ff6737;
	text-align: center;
	font-style: normal;
	text-transform: none;
}

.title-date {
	display: inline-block;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 28rpx;
}

.title-number {
	margin-left: 10px;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #b0b0b0;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.uni-list-cell-db {
	display: block;
	border: 2rpx solid #d1d1d1;
	border-radius: 8rpx;
	padding: 8rpx;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #6d6d6d;
	text-align: center;
	font-style: normal;
	text-transform: none;
}

.uni-input {
	display: flex;
	align-items: center;
}
.loading-status {
	padding: 20rpx;
	text-align: center;
}

.no-more {
	color: #999;
	font-size: 24rpx;
}
.list-container {
	height: 100%;
}
</style>
